<template>
  <div>
    <!-- 面包屑导航 -->

    <div class="center-w">
      <div class="type_container">
        <div
          class="pass_li"
          @click="judgeClick(0)"
          :style="{
            backgroundColor: currentJudgeFlag == 'pass' ? '#fff' : '#EFEFEF',
            color: currentJudgeFlag != 'pass' ? '#555' : '#2567cd'
          }"
        >
          通过判断说明
        </div>
        <div
          class="fail_li"
          @click="judgeClick(1)"
          :style="{
            backgroundColor: currentJudgeFlag == 'fail' ? '#fff' : '#EFEFEF',
            color: currentJudgeFlag == 'pass' ? '#555' : '#2567cd'
          }"
        >
          失败判断说明
        </div>
      </div>
      <div class="head">
        <div class="title"></div>
        <el-button type="success" size="mini" @click="addCheckItem()"
          >新增</el-button
        >
      </div>
      <el-card style="overflow-y: scroll;margin:  10px;">
        <el-table
          :header-cell-style="{
            background: '#f3f6fa',
            color: '#555'
          }"
          border
          size="mini"
          :data="checkList"
          style="overflow-y: auto;"
        >
          <el-table-column type="index" align="center"></el-table-column>
          <el-table-column prop="name" align="center" label="内容">
            <template slot-scope="scope">
              <span v-if="scope.row.state != -1"> 内容：</span>
              <div
                v-if="scope.row.state == -1"
                style="display: flex;align-items: center;height: 30px;padding-left: 50px;font-size: 14px;"
              >
                <span v-if="scope.row.state == -1"> 内容：</span>
                <span>{{ scope.row.name }}</span>
              </div>
              <el-input
                style="width: 90%;"
                show-word-limit
                size="small"
                placeholder="请输入"
                v-model="scope.row.name"
                clearable
                v-if="scope.row.state != -1"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column width="180" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="submit(scope.row)"
                v-if="scope.row.state != -1"
                :type="scope.row.id ? 'primary' : 'success'"
                >{{ scope.row.id ? "编辑" : "新增" }}</el-button
              >
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.state != -1"
                @click="deleteCurrentItem(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getCheckConclusionList,
  addCheckConclusion,
  updateCheckConclusion,
  delectCheckConclusion
} from "../../api/desConfig";

export default {
  data() {
    return {
      checkList: [
        {
          name:
            " 样品经过化学开盖，内部晶圆呈现【 】模具标记，验证该部件是由【 】制造的。",
          state: -1
        },
        { name: "【空白编辑内容】", state: -1 }
      ],
      otherObj: {},
      currentJudgeFlag: "pass",
      currentIndex: 0
    };
  },
  created() {
    this.getList(0);
  },

  methods: {
    //点击判断说明类别
    judgeClick(val) {
      if (val == 0) {
        this.currentJudgeFlag = "pass";
        this.currentIndex = 0;
        this.getList(0);
      } else {
        this.currentJudgeFlag = "fail";
        this.currentIndex = 1;
        this.getList(1);
      }
    },
    // 获取列表
    async getList(val) {
      this.checkList = [{ name: "【空白编辑内容】", state: -1 }];
      if (val == 0) {
        this.checkList.unshift({
          name:
            "样品经过化学开盖，内部晶圆呈现【 】模具标记，验证该部件是由【 】制造的。",
          state: -1
        });
      }
      let res = await getCheckConclusionList({ state: val });
      if (res.data) {
        res.data.forEach(item => {
          this.checkList.push(item);
        });
      } else {
        this.checkList = [{ name: "【空白编辑内容】", state: -1 }];
      }
    },

    // 添加
    addCheckItem() {
      this.checkList.push({
        name: ""
      });
    },

    // 删除某个选项
    deleteCurrentItem(e, index) {
      this.$confirm("您确定要删除吗？", "删除确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定删除",
        cancelButtonText: "取消"
      }).then(() => {
        //这里判断是否有id 有的话就根据接口来处理删除，没有的话就按照下标来删除。
        if (e.id) {
          delectCheckConclusion({ id: e.id }).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList(this.currentIndex);
            } else {
              this.$message.error("删除失败");
              this.getList(this.currentIndex);
            }
          });
        } else {
          this.checkList.splice(index, 1);
        }
      });
    },

    //确定提交 根据item 是否有id来判断当前操作是编辑还是新增
    submit(item) {
      if (!item.name) return this.$message.info("请填写完整的商品数据");
      if (item.id) {
        //编辑
        updateCheckConclusion({
          name: item.name,
          id: item.id,
          state: this.currentIndex
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("编辑成功");
            this.getList();
          } else {
            this.$message.error("编辑失败");
            this.getList();
          }
        });
      } else {
        //新增
        addCheckConclusion({ name: item.name, state: this.currentIndex }).then(
          res => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.getList(this.currentIndex);
            } else {
              this.$message.error("新增失败");
              this.getList(this.currentIndex);
            }
          }
        );
      }
    }
  }
};
</script>

<style lang="less" scoped>
.names {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  width: 250px;
  text-align: center;
  font-weight: 500;
}

.title {
  color: rgba(16, 16, 16, 1);
}

.head {
  position: absolute;
  right: 30px;
  top: 80px;
}

.sex {
  display: flex;
  align-items: center;
  margin: 10px 20px;
}

.btn {
  width: 200px;
  text-align: center;
}

.center-w {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 91vh;
  overflow-y: scroll;
  //border: 1px solid #ccc;
  //margin: 20px;
  .type_container {
    width: 100%;
    height: 50px;
    display: flex;
    background: rgb(239, 239, 239);
    .pass_li {
      width: 126px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #4f4f4f;
      background: rgb(239, 239, 239);
      cursor: pointer;
    }
    .fail_li {
      width: 126px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #4f4f4f;
      background: rgb(239, 239, 239);
      cursor: pointer;
    }
  }
}

.list-w {
  display: flex;
  align-items: center;
  /* border: 1px solid #f4f1f1; */
}

.sex div {
  color: rgba(109, 109, 109, 1);
  font-size: 16px;
  font-weight: 500;
}

.sex div:first-child {
  width: 150px;
  text-align: center;
}

.btn-s {
  margin-left: 35%;
  margin-top: 50px;
}
</style>
